import React, { useState } from 'react'
import styles from '../蔡瑞勇的css分支/Order.module.css'
import { Toast, NavBar, Tabs, Tag,Popup ,Checkbox,Button} from 'react-vant'
import { Search, Phone, GuideO,Cross } from '@react-vant/icons'

export default function Order() {

    const [states, setstates] = useState('')
    const [sai,setsai] = useState(0)

    const onCloses = () => setstates('')

    return (
        <div>
            <NavBar
                title={<div className={styles.bar_but}><div className={styles.but_div1}>外卖配送</div><div className={styles.but_div2}>到店自取</div></div>}
                leftArrow={false}
                rightText={<Search style={{ color: 'white' }} fontSize={20} />}
                onClickRight={() => Toast('按钮')}
                style={{ backgroundColor: '#ff6e53', padding: '0.1rem 0' }}

            />
            <Tabs defaultActive={0} color='#ff6e53' onClickTab={(e)=>{setsai(e.name)}}>
                <Tabs.TabPane title='全部' />
                <Tabs.TabPane title='待处理' />
                <Tabs.TabPane title='未取货' />
                <Tabs.TabPane title='配送中' />
                <Tabs.TabPane title='待审核' />
            </Tabs>
            <div className={styles.big}>
                <div className={styles.big_top}>
                    <div>
                        <span>徐梓鑫先生</span>
                        <span><GuideO style={{ color: '#000000' }} />&emsp;<Phone /></span>
                    </div>
                    <span style={{ fontSize: '0.15rem' }}>保定市莲池区南二环南大园乡1956号</span>
                    <span style={{ fontSize: '0.15rem' }}>近90天第5次下单</span>
                </div>
                <div className={styles.big_cent}>
                    <div>
                        <span>18:18等待顾客付款</span>
                        <span style={{ fontSize: '0.15rem' }}><Tag type="warning">平台转送</Tag><Tag color="#cc9966">到店自取</Tag>&emsp;9分钟后订单将关闭</span>
                    </div>
                    <span style={{ color: "#999" }}><span style={{ color: '#0066cc' }}>订单跟踪</span>＞</span>
                </div>
                <div className={styles.big_count}>
                    <div>
                        <img src="../../../public/bg4.png" alt="" />
                        <img src="../../../public/bg4.png" alt="" />
                        <img src="../../../public/bg4.png" alt="" />
                    </div>
                    <span style={{ color: "#999" }}><span style={{ color: '#0066cc' }}>共6件商品</span>＞</span>
                </div>
                <div className={styles.big_mess}>
                    <div>
                        <span style={{ fontSize: '0.15rem', color: '#363636' }}>发票信息</span>
                        <span style={{ fontSize: '0.15rem', color: '#797979' }}>不需要</span>
                    </div>
                    <div>
                        <span style={{ fontSize: '0.15rem', color: '#363636' }}>技术服务费</span>
                        <span style={{ fontSize: '0.15rem', color: '#797979' }}>-6.66</span>
                    </div>
                    <div>
                        <span style={{ fontSize: '0.15rem', color: '#363636' }}>本单预计收入</span>
                        <span style={{ color: 'red' }}>￥122</span>
                    </div>
                </div>
                <div className={styles.big_code}>
                    <span style={{ fontSize: '0.14rem', color: '#797979' }}>订单编号：16613581999987</span>
                    <span style={{ fontSize: '0.14rem', color: '#797979' }}>交易快照：发生争议时，可作为判断依据</span>
                    <span style={{ fontSize: '0.14rem', color: '#797979' }}>下单时间：12-03&nbsp;18:03</span>
                </div>
                <div className={styles.big_bot}>
                    <div style={{ color: '#797979', fontSize: '0.15rem' }} onClick={()=>{setstates('bottom')}}>关闭交易</div>
                    <div style={{ color: '#ff6e53', fontSize: '0.15rem',border:'1px solid #ff6e53',marginLeft:'0.1rem' }} onClick={()=>Toast.success('接单成功')}>打印接单</div>
                </div>
            </div>
            <Popup
                visible={states === 'bottom'}
                style={{ height: '40%' }}
                position='bottom'
                onClose={onCloses}
            >
                <NavBar
                    title={<h5>订单取消</h5>}
                    leftText={<Cross />}
                    onClickLeft={() => { onCloses() }}
                    style={{ backgroundColor: '#ffffff' }}
                />
                <div className={styles.dan}>
                    <div className={styles.dan_top}>
                        取消后无法恢复，优惠卷、红包可退回，请在有效期内使用。
                    </div>
                    <div className={styles.dan_div} style={{ fontSize: '0.15rem', color: '#7d7d7d' }}>
                        请选择取消订单原因
                    </div>
                    <div className={styles.dan_div}>
                        <span>点错菜、点多了</span>
                        <Checkbox checkedColor='#ee0a24' />
                    </div>
                    <div className={styles.dan_div}>
                        <span>计划有变，不想要了</span>
                        <Checkbox checkedColor='#ee0a24' />
                    </div>
                    <div className={styles.dan_div}>
                        <span>价格有点贵</span>
                        <Checkbox checkedColor='#ee0a24' />
                    </div>
                    <div className={styles.dan_div}>
                        <span>其他</span>
                        <Checkbox checkedColor='#ee0a24' />
                    </div>
                    <Button color='linear-gradient(to right, #ff9800, #fe4701)' className={styles.side_butt} onClick={()=>{setstates('')}}>
                        确定取消
                    </Button>
                </div>
            </Popup>
        </div>
    )
}
